/*body{*/
    /*background-color: #f00;*/
/*}*/

*{
    padding: 0;
    margin: 0;
}

ul{
    list-style: none;
}

body{
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    background-color: #eee;
    color: #fff;
}

.header{
    background-color: #f00;
}

.header>img{
    vertical-align: bottom;
}

/*中间*/
.main ul{
    display: flex;
    line-height: 50px;
    text-align: center;
    width: 100%;
    margin: 4px 0;
}

.main ul li{
    float: left;
    /*flex-grow: 1;*/
    /*flex-shrink: 1;*/
    /*flex-basis: auto;*/
    flex: 1;
    border-right: 1px solid #fff;
}

.main ul:nth-child(1) li{
    background-color: #fe494c;
}

.main ul li img{
    width: 42px;
}

.main ul:nth-child(2) li{
    background-color: #0a95e4;
}

.main ul:nth-child(3) li{
    background-color: #71af3a;
}

.main ul:nth-child(4) li{
    background-color: #ff8d20;
}

.main ul li:nth-child(1){
    height: 100px;
    /*line-height: 100px;*/
}

.main ul:last-child li{
    height: 50px;
}

.main ul li:last-child{
   border: none;
}

.main ul li>div{
    height: 50px;
}

.main ul li>div:last-child{
    box-sizing: border-box;
    border-top: 1px solid #fff;
}

/*导航*/
.nav ul{
    display: flex;
    background-color: #fff;
    padding-bottom: 10px;
}

.nav ul li{
    float: left;
    flex: 1;
    color: #333;
    text-align: center;
    font-size: 12px;
}

.nav ul li i{
    margin-top: 20px;
    width: 33px;
    height: 33px;
    display: inline-block;
    background-color: #f00;
    background: url("../source/img/icons.png") no-repeat;
}

/*第一行*/
.nav ul:nth-child(1) li:nth-child(1) i{
    background-position: -35px -12px;
}

.nav ul:nth-child(1) li:nth-child(2) i{
    background-position: -124px -12px;
}

.nav ul:nth-child(1) li:nth-child(3) i{
    background-position: -212px -12px;
}

.nav ul:nth-child(1) li:nth-child(4) i{
    background-position: -300px -79px;
}

/*第二行*/
.nav ul:nth-child(2) li:nth-child(1) i{
    background-position: -300px -12px;
}

.nav ul:nth-child(2) li:nth-child(2) i{
    background-position: 3px 6px;
}

.nav ul:nth-child(2) li:nth-child(3) i{
    background-position: -212px -79px;
}

.nav ul:nth-child(2) li:nth-child(4) i{
    background-position: -300px -12px;
}

/* 更多推荐引导 */
.guide{
    display: flex;
    color: #333;
    text-align: center;
    font-size: 12px;
    background-color: #fff;
}

.guide div{
    background-color: #ff0;
    padding-top: 20px;
    flex: 1;
    height: 80px;
}

.guide div i{
    border: 1px solid #000;
    border-radius: 50%;
    font-size: 30px;
    line-height: 40px;
    width: 40px;
    display: inline-block;
}

.guide div:nth-child(2) i{
    font-size: 25px; 
}
.guide div:nth-child(3) i{
    font-size: 25px; 
}

/* footer */
.foot{
    background-color: #f00;
}

.foot .inner{
    text-align: center;
}

.foot p{
    display: inline-block;
    line-height: 50px;
    
}